<template>
  <div>
    <div style="background: #ececec; padding: 10px;">
      <Card title="工单量统计" :head-style="{ fontWeight: 900 }">
        <Row :gutter="12"  index="">
          <Col span="4">
          <Card :body-style="{width:'250px'}">
            <ContainerOutlined style="font-size: 3vw; color: #3f8600;" />
            <Statistic title="今日工单量" :value="dataNum.data.todayNum" suffix="条"
              :value-style="{ color: 'blue', marginLeft: '10px',width:'100px' }" class="statisitc">
            </Statistic>
          </Card>
          </Col>
          <Col span="4">
          <Card>
            <FileDoneOutlined style="font-size: 3vw; color: #3f8600;" />
            <Statistic title="今日结单量" :value="dataNum.data.colseNum" suffix="条"
              :value-style="{ color: 'blue', marginLeft: '10px',width:'100px' }" class="statisitc">
            </Statistic>
          </Card>
          </Col>
          <Col span="4">
          <Card>
            <ExceptionOutlined style="font-size: 3vw; color: #3f8600;" />
            <Statistic title="延期工单量" :value="dataNum.data.extensionNum" suffix="条"
              :value-style="{ color: 'blue', marginLeft: '10px',width:'100px' }" class="statisitc">
            </Statistic>
          </Card>
          </Col>
          <Col span="4">
          <Card>
            <ReconciliationOutlined style="font-size: 3vw; color: #3f8600;" />
            <Statistic title="投诉工单量" :value="dataNum.data.complainNum" suffix="条"
              :value-style="{ color: 'blue', marginLeft: '10px',width:'100px' }" class="statisitc">
            </Statistic>
          </Card>
          </Col>
          <Col span="4">
          <Card>
            <FileProtectOutlined style="font-size: 3vw; color: #3f8600;" />
            <Statistic title="督办工单量" :value="dataNum.data.superviseNum" suffix="条"
              :value-style="{ color: 'blue', marginLeft: '10px',width:'100px' }" class="statisitc">
            </Statistic>
          </Card>
          </Col>
          <Col span="4">
          <Card>
            <ReconciliationOutlined style="font-size: 3vw; color: #3f8600;" />
            <Statistic title="不计考核工单量" :value="dataNum.data.disregardNum" suffix="条"
              :value-style="{ color: 'blue', marginLeft: '10px',width:'100px' }" class="statisitc">
            </Statistic>
          </Card>
          </Col>
        </Row>
      </Card>
    </div>
    <div style="background: #ececec; margin-top: 10px; padding: 10px">
      <Card title="待办任务" :head-style="{ fontWeight: 900 }">
        <Tabs destroy-inactive-tab-pane type="card">
          <Tabs.TabPane key="processHis1" tab="工单办理">
            <todoWorkOrderList :showToolBar="false" :search="false"></todoWorkOrderList>
          </Tabs.TabPane>
          <Tabs.TabPane key="processHis2" tab="延期申请">
            <todoExtensionList :showToolBar="false" :search="false"></todoExtensionList>
          </Tabs.TabPane>
          <Tabs.TabPane key="processHis3" tab="工单督办">
            <todoSuperviseList :showToolBar="false" :search="false"></todoSuperviseList>
          </Tabs.TabPane>
          <Tabs.TabPane key="processHis4" tab="不计考核">
            <todoDisregardList :showToolBar="false" :search="false"></todoDisregardList>
          </Tabs.TabPane>
        </Tabs>
      </Card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Row, Col, Card, Statistic, Tabs } from 'ant-design-vue';
import { ReconciliationOutlined, FileDoneOutlined, ExceptionOutlined, ContainerOutlined, FileProtectOutlined } from '@ant-design/icons-vue';
import { getCount } from '@/api/workorder/statisticanalysis';
import { onMounted, reactive } from 'vue';
import todoWorkOrderList from '@/views/workorder/task/todo/indexWorkOrder.vue';
import todoExtensionList from '@/views/workorder/task/todo/indexExtension.vue';
import todoDisregardList from '@/views/workorder/task/todo/indexDisregard.vue';
import todoSuperviseList from '@/views/workorder/task/todo/indexSupervise.vue';



defineOptions({
  name: 'workorderindex',
});
let dataNum = reactive({
  data: {}
});
onMounted(async () => {
  dataNum.data = await getCount();
})
</script>

<style lang="less" scoped>
.statisitc {
  margin-right: 50px;
  position: absolute;
  top: 25px;
  left: 6.5vw;
  font-weight: 900;
}
</style>
